<script>
export default {
  name: "Dashboard",
  data() {
    return {
      counts: [
        { name: "入驻企业数量", num: 2, color: "#ebf6fe" },
        { name: "新入驻申请数量", num: 2, color: "#edfef0" },
        { name: "新增用户数量", num: 3, color: "#ebf6fe" },
        { name: "活跃用户数量", num: 6, color: "#efefff" },
        { name: "总回收单数", num: 18, color: "#eefef0" },
      ],
      tableData: [
        {
          name: "东方纪元废品回收公司",
          state: "新申请",
          date: "2024-02-20 14:57:45",
        },
        {
          name: "长鸿上门回收有限公司",
          state: "新申请",
          date: "2024-02-19 10:25:20",
        },
      ]
    }
  }
}
</script>

<template>
  <div class="home">
    <div class="desc">
      <div>
        <h1>欢迎使用</h1>
        <h1>废品上门回收服务平台</h1>
        <div class="title1">省时省力, 绿色环保, 专业回收, 服务到家</div>
        <div class="title2">-----携手打造智能回收新时代!</div>
      </div>
      <div>
        <img src="@/assets/image1.png" alt="" />
      </div>
    </div>
    <div class="card-list">
      <div
        v-for="item in counts"
        class="card"
        :style="{ backgroundColor: item.color }"
      >
        <div>{{ item.name }}</div>
        <div>{{ item.num }}</div>
      </div>
    </div>

    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="企业名称" width="180" />
        <el-table-column prop="state" label="状态" />
        <el-table-column prop="date" label="申请时间" width="180" />
        <el-table-column prop="" label="操作" width="180">
          <el-button type="text">处理</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  padding: 10px;
  .desc {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
    h1 {
      font-size: 38px;
    }
    .title1,
    .title2 {
      color: #9d9d9d;
      width: 300px;
      text-align: right;
    }
  }
  .card-list {
    margin-top: 20px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffff;
    padding: 20px;
    .card {
      width: 200px;
      height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      > div {
        &:nth-child(1) {
          font-size: 16px;
        }
        &:nth-child(2) {
          font-size: 40px;
        }
      }
    }
  }
  .table {
    margin-top: 20px;
    background-color: #fff;
  }
}
</style>
